<!--
 * @description  : 品规查询
 * @descriptionDetail: 品规查询
 * @copyright    : 浙江烟草
 * @author       : mwq
 * @create       : 2022-12-26 07:57:52
-->
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <!-- 导航栏右侧搜索 -->
      <view style="margin-right:20rpx;">
        <u-icon name="search" color="#fff" size="40" @tap="handlerShowSearch"></u-icon>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <u-popup mode="top" border-radius="40" height="80%" v-model="showSearch">
      <u-form style="padding: 5px 10px;" :model="formData" ref="uForm">
        <u-card
          margin="20rpx"
          :show-head="false"
          :show-foot="false"
          thumb="../../../../static/check/pending-approval.png"
          thumb-width="38"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #body>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="货源属性" prop="supplyFullyName">
              <z-dict-select dictType="I_CIGA_SUPPLY_FULLY" v-model="formData.supplyFullyName" @confirm="handleDictConfirm"></z-dict-select>
            </u-form-item>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="敏感品规" prop="status">
              <u-switch active-value="1" inactive-value="" v-model="formData.status" @change="changeStatus"></u-switch>
            </u-form-item>
          </template>
        </u-card>
        <u-card
          margin="20rpx"
          :show-head="false"
          :show-foot="false"
          thumb="../../../../static/check/pending-approval.png"
          thumb-width="38"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #body>
            <view class="left-top">
              <p class="left-top-text">
                风险研判
              </p>
            </view>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="风险指数" prop="riskIndex">
              <span class="input-width"><u-input placeholder="请输入" :custom-style="customStyle" type="number" v-model="formData.riskIndexBegin" /></span>
              <span class="between">至</span>
              <span class="input-width"><u-input placeholder="请输入" :custom-style="customStyle" type="number" v-model="formData.riskIndexEnd" /></span>
            </u-form-item>
          </template>
        </u-card>
        <u-card
          margin="20rpx"
          :show-head="false"
          :show-foot="false"
          thumb="../../../../static/check/pending-approval.png"
          thumb-width="38"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #body>
            <view class="left-top" style="width:92px;height:43px;">
              <p class="left-top-text">
                外流
              </p>
            </view>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="数量" prop="date">
              <span class="date-width"><u-number-box :size="18" :input-width="42" bg-color="" color="#027AFF" v-model="formData.outFlowNumBegin"></u-number-box></span>
              <span class="between">至</span>
              <span class="date-width"><u-number-box :size="18" :input-width="42" bg-color="" color="#027AFF" v-model="formData.outFlowNumEnd"></u-number-box></span>
            </u-form-item>
          </template>
        </u-card>
        <u-card
          margin="20rpx"
          :show-head="false"
          :show-foot="false"
          thumb="../../../../static/check/pending-approval.png"
          thumb-width="38"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #body>
            <view class="left-top" style="width:92px;height:43px;">
              <p class="left-top-text">
                预警
              </p>
            </view>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="日期" prop="warnDate">
              <span class="date-width"><z-date placeholder="开始时间" :custom-style="customStyle" v-model="formData.warnBeginDate" /></span>
              <span class="between">至</span>
              <span class="date-width"><z-date placeholder="结束时间" :custom-style="customStyle" v-model="formData.warnEndDate" /></span>
            </u-form-item>
            <u-form-item :label-width="labelWidth" :label-style="labelStyle" label="次数 >=" prop="warnNumBegin">
              <span class="date-width"><u-number-box :size="18" :input-width="42" bg-color="" color="#027AFF" v-model="formData.warnNumBegin"></u-number-box></span>
            </u-form-item>
          </template>
        </u-card>
        <u-card
          margin="20rpx"
          :show-head="false"
          :show-foot="false"
          thumb="../../../../static/check/pending-approval.png"
          thumb-width="38"
          box-shadow="#e5e5e5 0px 0px 50px"
        >
          <template #body>
            <u-row gutter="16" justify="space-around">
              <u-col span="5" text-align="center">
                <u-button type="primary" size="medium" shape="circle" @tap="handleSearch">
                  搜索
                </u-button>
              </u-col>
              <u-col span="5" text-align="center">
                <u-button size="medium" shape="circle" @tap="reset">
                  重置
                </u-button>
              </u-col>
            </u-row>
          </template>
        </u-card>
      </u-form>
    </u-popup>
    <view>
      <template>
        <u-sticky :enable="enable">
          <view class="sticky">
            <u-search
              placeholder="请输入品规"
              :clearabled="true"
              :show-action="true"
              action-text="搜索"
              :animation="true"
              v-model="formData.productName"
              @custom="searchProduct"
            >
            </u-search>
          </view>
          <view class="sticky" style="padding-bottom:10px;padding-top:0px;">
            <p style="font-size:14px;">
              本次筛选出
              <span style="font-weight:bold"> {{ totalCount }} </span>
              个品规
            </p>
          </view>
        </u-sticky>
      </template>
      <me-table
        :i="0"
        :index="0"
        :load-data="loadData"
        ref="mescrollItem0"
      >
        <template slot-scope="d">
          <u-card
            margin="20rpx"
            :show-head="false"
            :show-foot="false"
            thumb="../../../../static/check/pending-approval.png"
            thumb-width="38"
            box-shadow="#e5e5e5 0px 0px 50px"
            @click="findDetailInfo(d.data)"
          >
            <template #body>
              <u-row style="margin-bottom:10px;">
                <u-col span="1.5">
                  <u-image style="width:25px;height:25px;" src="../../../static/cigar/icon_yc.png"></u-image>
                </u-col>
                <u-col span="10">
                  <p style="font-size:30rpx;font-weight:bold;color:#333333;">
                    {{ d.data.productName }}
                  </p>
                </u-col>
              </u-row>
              <u-row style="margin-bottom:13px;">
                <u-col span="1"></u-col>
                <u-col span="3.5">
                  <span class="product_left"> {{ d.data.supplyFullyName }}</span>
                </u-col>
                <!-- <u-col span="3.5"><span class="product_left">紧俏品规</span></u-col> -->
                <u-col span="7.5">
                  <span class="product_right">{{ d.data. riskBrandTypeName }} (指数：{{ d.data. riskIndex }})</span>
                </u-col>
              </u-row>
              <u-row>
                <u-col span="1"></u-col>
                <u-col span="4">
                  <p class="outflow_left">
                    本月外流(条)
                  </p>
                  <p class="num_left">
                    {{ d.data.outFlowNum }}
                  </p>
                </u-col>
                <u-col span="1">
                  <u-line direction="col" length="43px" :hair-line="false" color="#D8D8D8"></u-line>
                </u-col>
                <u-col span="5.5">
                  <p class="outflow_right">
                    年度累计外流(条)
                  </p>
                  <p class="num_right">
                    {{ d.data.outFlowYearNum }}
                  </p>
                </u-col>
              </u-row>
              <!-- </view> -->
            </template>
          </u-card>
        </template>
      </me-table>
    </view>
  </view>
</template>
<script>
	import meTable from '@/components/me-table.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import {
		ZDate,
		ZDictSelect,
	} from '@/components'
	import uSwitch from '@/uview-ui/components/u-switch/u-switch.vue';
	import cigarService from "@/service/internal/cigar.service.js";
	import {
		dateUtils,
	} from "@/common/util";
	import fabButton from '@/components/uni-fab.vue';


	export default {
		components: {
			meTable,
			ZDate,
			uSwitch,
			ZDictSelect,
			fabButton
		},
		mixins: [MescrollMoreMixin, ], // 分页查询组件
		data() {
			return {
				showSearch: false,
				showSuper: false,
				labelWidth: 130,
				labelWidths: 20,
				labelStyle: {
					fontSize: '14px',
					fontFamily: '.PingFang SC',
					fontWeight: '600',
					color: '#333333',
					opacity: '1',
				},
				formData: {
					supplyFully: '',
					supplyFullyName: '',
					isSensCiga: '',
					status: false, // 敏感品规选择器默认值
					riskIndexBegin: '',
					riskIndexEnd: '',
					// outFlowNumBegin: 1,
					// outFlowNumEnd: 1,
					warnBeginDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
					warnEndDate: dateUtils.dateFormat("yyyy-MM-dd", (new Date())),
				},
				totalCount: "", // 总条数
				enable: true,
				customStyle: {
					fontSize: '13px',
				},
				fContent: [{
					iconPath: require('@/static/sou.png'),
					selectedIconPath: require('@/static/sou.png'),
					text: '筛选',
					active: false,
				}],
			}
		},
		onLoad() {
			// this.getCurrentDate();
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
		},
		methods: {
			loadData(page) {
				console.log("page.size", page.size, "page.num", page.num);
				return new Promise(resolve => {
					cigarService.selectProductInfoList(page.num, page.size, this.formData).then((res) => {
						if (res.success) {
							resolve({
								"data": res.data,
							});
							this.totalCount = res.count;
						} else {
							this.$u.toast(res.msg);
						}
					}).catch((error) => {
						this.$u.toast(error);
					});
				});
			},
			setRightBtns() {
				// #ifdef H5-DINGDING
				// 先放开右侧标题
				this.$deviceApi.setRight("", () => {}, true, true);
				// 设置右侧多按钮，苹果手机对此接口的格式要求比较严格，不能出现多余的符号
				let menuItemStr = '[{"id":"1","text":"筛选"}]';
				this.$deviceApi.setMenu(JSON.parse(menuItemStr), res => {
					this.handlerShowSearch();
				});
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerShowSearch();
				}
			},
			getCurrentDate() {
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				mm = mm < 10 ? '0' + mm : mm;
				this.formData.warnBeginDate = yy + '-' + mm + '-01';
				this.formData.warnEndDate = yy + '-' + mm + '-' + dd;
			},
			handlerShowSearch() {
				this.showSearch = true;
			},
			handleShowSuper() {
				this.showSuper = true;
			},
			// 字典选中确认
			handleDictConfirm(item) {
				console.log("调用选中", item);
				this.formData.supplyFully = item.value;
				this.formData.supplyFullyName = item.label;
			},
			// 敏感品规选中确认
			changeStatus(status) {
				this.formData.isSensCiga = status;
			},
			// 品规查询
			searchProduct() {
				this.$refs.mescrollItem0.refresh();
			},
			handleSearch() {
				console.log(this.formData);
				this.showSearch = false;
				this.initLoad = true;
				this.$refs.mescrollItem0.refresh();
			},
			// 重置筛选条件
			reset() {
				// this.$refs.uForm.resetFields();
				this.formData = {
					supplyFully: '',
					supplyFullyName: '',
					isSensCiga: '',
					status: false, // 敏感品规选择器默认值
					warnBeginDate: dateUtils.dateFormat("yyyy-MM-dd", dateUtils.firstDate(new Date())),
					warnEndDate: dateUtils.dateFormat("yyyy-MM-dd", (new Date())),
				};
				console.log(this.formData);
			},
			// 点击品规查看详情信息
			findDetailInfo(mItem) {
				console.log("点击", mItem);
				this.enable = false;
				this.$u.route("/pages/internal/cigar/cigarDetail", {
					productUuid: mItem.productUuid,
					riskIndex: mItem.riskIndex,
					productName: mItem.productName,
					riskBrandTypeName: mItem.riskBrandTypeName,
					stripCode: mItem.stripCode,
					warnBeginDate: this.formData.warnBeginDate,
					warnEndDate: this.formData.warnEndDate,
				});
			},
		},
	}
</script>
<style lang="scss" scoped>
	.news-li {
		font-size: 32rpx;
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;
	}

	.news-li .new-content {
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		color: #666;
	}

	/deep/ .u-sticky {
		top: 0 !important;
	}

	.sticky {
		width: 750rpx;
		padding: 42rpx 45rpx;
		background-color: white;
	}

	.product_left {
		font-size: 13px;
		font-family: ".PingFang SC";
		font-weight: 400;
		color: #666680;
		opacity: 1;
		background: #EFF3F9;
		opacity: 1;
		border-radius: 5px;
		padding: 5px 10px 4px 10px;
	}

	.product_right {
		font-size: 13px;
		font-family: ".PingFang SC";
		font-weight: 400;
		color: #666680;
		opacity: 1;
		width: 186px;
		height: 29px;
		background: #EFF3F9;
		opacity: 1;
		border-radius: 5px;
		padding: 5px 10px 5px 10px;
	}

	.outflow_left {
		font-size: 14px;
		font-family: ".PingFang SC";
		font-weight: 400;
		line-height: 24px;
		color: #888888;
		opacity: 1;
		margin-bottom: 6px;
	}

	.line {
		width: 0px;
		height: 43px;
		border: 1px solid #D8D8D8;
		opacity: 1;
	}

	.outflow_right {
		font-size: 14px;
		font-family: ".PingFang SC";
		font-weight: 400;
		line-height: 24px;
		color: #888888;
		opacity: 1;
		margin-bottom: 6px;
	}

	.num_left {
		font-size: 16px;
		font-family: ".PingFang SC";
		font-weight: 600;
		line-height: 24px;
		color: #333333;
		opacity: 1;
	}

	.num_right {
		font-size: 16px;
		font-family: ".PingFang SC";
		font-weight: 600;
		line-height: 24px;
		color: #333333;
		opacity: 1;
	}

	.left-top {
		width: 130px;
		height: 43px;
		background: #027AFF;
		opacity: 1;
		border-radius: 0px 0px 24px 0px;
		margin-left: -18px;
		margin-top: -18px;
	}

	.left-top-text {
		width: 77px;
		height: 27px;
		font-size: 19px;
		font-family: ".PingFang SC";
		font-weight: 500;
		color: #FFFFFF;
		opacity: 1;
		padding: 8px 29px 8px 24px;
	}

	.between {
		background: #E6F1FF;
		border-radius: 19px;
		font-size: 14px;
		font-family: ".PingFang SC";
		font-weight: 600;
		color: #027AFF;
		opacity: 1;
		padding: 7px 12px;
		text-align: center;
		margin-left: 10px;
		margin-right: 10px;
		line-height: 20px;
	}

	.date-width {
		width: 40%;
	}

	.input-width {
		width: 40%;
	}
</style>
